@use "sass:math";
@use "../../../assets/lib/index"as lib;

.v-sidemenu {
    --v-sidemenu-background-color: rgba(250, 250, 250, 1.0);
    --v-sidemenu-border-color    : rgba(238, 238, 238, 1.0);
    --v-sidemenu-item-padding    : var(--v-padding-base);
    --v-sidemenu-item-icon-size  : #{math.div(25, lib.$fontsize-base)}rem;

    background-color: var(--v-sidemenu-background-color);
    border-right    : #{math.div(1, lib.$fontsize-base)}rem solid var(--v-sidemenu-border-color);
    width           : percentage($number: 1);
    height          : percentage($number: 1);

    &__container {
        height: percentage($number: 1);
        width : percentage($number: 1);
    }

    &__title {
        border-bottom: #{math.div(1, lib.$fontsize-base)}rem solid var(--v-sidemenu-border-color);
    }

    &__item {
        padding: var(--v-sidemenu-item-padding);
        cursor : pointer;

        div[role="icon"] {
            width : var(--v-sidemenu-item-icon-size);
            height: var(--v-sidemenu-item-icon-size);

            >img {
                width : percentage($number: 1);
                height: percentage($number: 1);
            }
        }
    }

    &__item[aria-actived="true"] {
        border-right: #{math.div(3, lib.$fontsize-base)}rem solid var(--v-primary);

        div[role="text"] {
            color      : var(--v-main-text);
            font-weight: bold;
        }
    }

    &__item[aria-actived="false"] {
        div[role="text"] {
            color: var(--v-placeholder-text);
        }
    }

    &__item:hover {
        background-color: rgba(238, 238, 238, 1.0);
    }
}